const Table = [
  { field_name: '订单号', field_caption: '订单号', display: 'true' },
  { field_name: 'aps交货日期', field_caption: 'aps交货日期', display: 'true' },
  { field_name: 'erp交货日期', field_caption: 'erp交货日期', display: 'true' },
  { field_name: '订单数量', field_caption: '订单数量', display: 'true' },
  { field_name: '已完工数', field_caption: '已完工数', display: 'true' }
]

const OrderPopup = {
  data () {
    return {
      visible: false,
      position: {}
    }
  },
  mounted () {

  },
  methods: {
    show (res, position) {
      var table = (res.header || Table).filter((item) => item.display === 'true')
      var data = res.data || []
      if (data.length === 0) return
      this.visible = true
      this.position = position
      console.log(this.$refs.content)

      var $table = document.createElement('table')
      $table.style.width = '100%'
      const $tableRow = document.createElement('tr')
      for (let ci = 0; ci < table.length; ci++) {
        const $tableCell = document.createElement('th')
        const width = table[ci].width ? table[ci].width + 'px' : '100%'
        const content = table[ci].field_caption
        $tableCell.innerHTML = '<span title="' + content + '" class="text-overflow" style="width:' + width + ';">' + content + '</span>'
        $tableRow.appendChild($tableCell)
      }
      $table.appendChild($tableRow)

      for (let ri = 0; ri < data.length; ri++) {
        const $tableRow = document.createElement('tr')
        $table.appendChild($tableRow)
        for (let ci = 0; ci < table.length; ci++) {
          const key = table[ci].field_name
          const item = data[ri][key]
          const width = table[ci].width ? table[ci].width + 'px' : '100%'
          const $tableCell = document.createElement('td')
          const content = item
          $tableCell.innerHTML = '<span title="' + content + '" class="text-overflow" style="width:' + width + ';">' + content + '</span>'
          $tableRow.appendChild($tableCell)
        }
      }
      this.$refs.content.innerHTML = $table.outerHTML
    },
    hide () {
      this.visible = false
    }
  },
  render () {
    return <div
      class="order-popup-container"
      style={{
        position: 'fixed',
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        background: 'rgba(0,0,0,0.01)',
        zIndex: 9999
      }}
      v-show={this.visible}
      onClick={(evt) => {
        this.hide()
      }}
    >
      <div class="order-popup"
        style={{
          position: 'fixed',
          background: 'white',
          boxShadow: '0px 4px 15px rgba(0,0,0,0.15)',
          width: '400px',
          ...this.position
        }}
        onClick={(evt) => {
          evt.stopPropagation()
          evt.preventDefault()
        }}
      >
        <div ref="content" />
      </div>
    </div>
  }
}

export default OrderPopup
